<!-- <script type="text/javascript">
$(document).ready(function() {
	$(".topbar").dropdown();
});
</script> -->
<div class="navbar navbar-fixed-top">
<div id="topbar" class="navbar-inner"> 
	<div class="container">
	  
	  #{if user}
	  #{if user.admin}
	  <div class="nav-collapse">
	   <ul class="nav pull-left">
	  	<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">
      <!--
      <i class="icon-th-list icon-white"></i>
      -->
      <img style="width: 40px; height: 35px;" src="@{'/public/images/menu.png'}"/>
      <b class="caret"></b></a>
	  	<ul class="dropdown-menu">	
	  	  <li><a href="#!/residence"><i class="icon-home"></i> Residencia</a></li>
		    <li><a href="#!/users"><i class="icon-user"></i> Internos</a></li>
		    <li><a href="#!/upload"><i class="icon-share"></i> Compartir</a></li>
		  <!--
		  <li><a href="#!/internet"><i class="icon-search"></i> Internet</a></li>
		  -->
	  	</ul>
	  </ul>
	  </div>
	  #{/if}
	  #{if (user.familiar || user.internal)}
	  <div class="nav-collapse">
	  <ul class="nav pull-left">
	  	<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">
      <!--
      <i class="icon-th-list icon-white"></i>
      -->
      <img style="width: 40px; height: 35px;" src="@{'/public/images/menu.png'}"/>
      
      <b class="caret"></b></a>
	  	<ul class="dropdown-menu">
	  	  <li class="menu-li"><a href="#!/upload"><i class="icon-share"></i><span style="font-size:150%"> Compartir<span></a></li>
	  	  <li class="divider"></li>
		    <li class="menu-li"><a href="#!/inbox"><i class="icon-inbox"></i> <span style="font-size:150%"> Recibidos</span></a></li>
		    <li class="divider"></li>
		    <li class="menu-li"><a href="#!/outbox"><i class="icon-list-alt"></i> <span style="font-size:150%"> Enviados</span></a></li>
		    <li class="divider"></li>
		    <li class="menu-li"><a href="#!/internet"><i class="icon-search"></i><span style="font-size:150%"> Internet</span></a></li>
		    <li class="divider"></li>
		    <li><a href="#!/takephoto"><i class="icon-camera"></i><span style="font-size:150%"> Sacar foto</span></a></li>
	  	</ul>
	  </ul>
	  </div>
	  #{/if}
	  #{/if}
	  
	  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
	      <span class="icon-bar"></span>
	      <span class="icon-bar"></span>
	      <span class="icon-bar"></span>
      </a>
	  <a class="brand" href="@{Application.index()}"><span style="font-size:150%">Batzen</span></a>
	  
	  <div class="nav-collapse">
		<ul class="nav">
			<!--
			<li ${index ? "class=active" : ""}><a href="@{Application.index()}">Inicio</a></li>
			<li ${about ? "class=active" : ""}><a href="@{Application.about()}">About</a></li>
			<li ${contact ? "class=active" : ""}><a href="@{Application.contact()}">Contacto</a></li>
			-->
		</ul>
	  </div>
	  
	        

	<div class="nav-collapse">
      <ul class="nav pull-right">
      	<li class="divider-vertical"></li>
      	#{if user}
      	
      	<li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown">
          
          
          <span style="font-size:200%">Bienvenid@ ${user.username}</span><b class="caret"></b></a>
      	 
         #{if (user.familiar || user.internal ||user.admin)}
         
         <ul class="dropdown-menu">
         		<li class="menu-li"><a href="javascript:VirtualKeyboard.toggle('','td'); return false;"><i class="icon-user"></i><span style="font-size:150%"> Teclado</span></a></li>
         		
         </ul>
         
           <ul class="dropdown-menu">
	    	    <li class="menu-li"><a href="#!/profile"><i class="icon-user"></i><span style="font-size:150%"> Perfil</span></a></li>
	   	      <li class="divider"></li>
      		  <li class="menu-li"><a href="@{Secure.logout()}"><i class="icon-off"></i><span style="font-size:150%"> Salir</span></a></li>
      		</ul>
        #{/if}
        #{else}
      		<ul class="dropdown-menu">
      		  <li><a href="@{Secure.logout()}"><i class="icon-off"></i>Salir</a></li>
      	   </ul>
      	#{/else}
        #{/if}
      </ul>
      </div>
  	</div>
</div> 
</div><!--  topbar -->
